<!--
 * @Author: caozaihui
 * @Date: 2024-06-21 09:36:08
 * @LastEditors: czh 2119294696@qq.com
 * @LastEditTime: 2024-06-24 17:06:24
 * @FilePath: \YMU_forum_vue\src\views\Search\Search.vue
-->
<!-- 搜索界面 -->
<script setup>
import { Search } from '@element-plus/icons-vue'
import { useRoute } from 'vue-router';
import LayoutFooter from '@/components/LayoutFooter.vue';
import { getSearch } from '@/apis/search';
import { onMounted, ref } from 'vue'
import ArticleCardFull from '@/components/article/ArticleCardFull.vue';
const route = useRoute()

// 文章列表
const articleList = ref([]);
const queryData = ref({
    query: '',
    status: false,
    type: ''
})

onMounted(()=>{
    queryData.value.query = route.query.para
    getSearch(queryData.value).then(res => {
        articleList.value = res.data.pageInfo.list;
    });
})

// 启动搜索
const startSearch = () => {
    getSearch(queryData.value).then(res => {
        articleList.value = res.data.pageInfo.list;
    });
}

</script>

<template>
    <div style="align-items: center;justify-content: center;background-color: white;">
        <div style="background-color: white;height: 100px;"></div>
        <div style="display: flex;align-items: center;justify-content: center;">
            <el-input placeholder="键入内容以搜索" class="search" v-model="queryData.query"></el-input>
            <!-- 搜索按钮 -->
            <el-button type="primary" size="large" @click="startSearch">搜索
                <el-icon style="margin-left: 10px;" size="20">
                    <Search />
                </el-icon>
            </el-button>
        </div>
        <div style="display: flex;align-items: center;justify-content: center;">
            <!-- 搜索分类 -->
            <el-tabs type="border-card" class="type">
                <el-tab-pane label="文章">
                    <div>
                        <!-- 显示文章 -->
                        <ArticleCardFull :articleList="articleList" />
                    </div>
                </el-tab-pane>
                <el-tab-pane label="用户">正在开发</el-tab-pane>
                <!-- <el-tab-pane label="分类">Role</el-tab-pane> -->
            </el-tabs>
        </div>
    </div>
    <LayoutFooter />
</template>

<style scoped>
.search {
    width: 700px;
    height: 42px;
    margin-right: 10px;
}

.type {
    margin-top: 20px;
    width: 850px;
    margin-bottom: 100px;
}
</style>